<template>
	<view class="container">
		<!-- 悬浮按钮 -->
		<uni-fab ref="fab" :pattern="pattern" :content="content" @trigger="handleClick" direction="horizontal"
			horizontal="left" />
		<!-- 顶部 -->
		<image src="http://image.dcwedu.top/i/2023/01/03/p558h4-0.jpeg" mode="aspectFill" class="cover"></image>
		<!-- 筛选 -->
		<uni-data-select style="padding: 0 20rpx; margin-top: 10rpx" placeholder="请选择校园圈分类"
			@change="handleCategoryChange" v-model="category" :localdata="categorySelect"></uni-data-select>
		<!-- 内容列表 -->
		<view class="content">
			<Card v-for="item in list" :key="item.circleID" :detail="item" @getMoreList="getMoreList" />
		</view>
		<uni-load-more v-if="!noMore"></uni-load-more>
		<view class="no-more" v-else>没有更多啦……</view>
	</view>
	<Loading />
</template>

<script setup>
	import {
		onBeforeMount,
		ref
	} from 'vue'
	import {
		onPullDownRefresh,
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		GetCircleCategoryList,
		GetCircleList
	} from '@/apis/circle.js'
	import Loading from '@/components/Loading.vue'
	import Card from './components/card.vue'

	const fab = ref()
	const categoryList = ref([])
	const categorySelect = ref([])
	const category = ref()
	const list = ref()
	const page = ref(0)
	const limit = ref(5)
	const noMore = ref(false)

	// 悬浮按钮样式
	const pattern = {
		buttonColor: '#184795'
	}
	// 悬浮按钮内容
	const content = [{
			text: '发布',
			iconPath: '/static/icons/add.png'
		},
		{
			text: '我发布的',
			iconPath: '/static/icons/history.png'
		},
		{
			text: '我赞过的',
			iconPath: '/static/icons/thumb.png'
		}
	]
	// 页面刷新
	async function refresh() {
		// noMore.value = false
		// searchText.value = confirmSearchText.value = "";
		// searchResult.value = null;
		// showSearch.value = false;
		await GetCircleCategoryList().then((res) => {
			categoryList.value = res.data
			categorySelect.value = []
			res.data.forEach((item) => {
				categorySelect.value.push({
					value: item.categoryID,
					text: item.category
				})
			})
			// console.log(categoryList.value)
		})
		await getMoreList()
	}
	// 下拉框改变
	function handleCategoryChange(e) {
		noMore.value = false
		page.value = 0
		category.value = e
		list.value = []
		// console.log(category.value)
		getMoreList()
	}
	// 分页列表
	function getMoreList() {
		if (noMore.value) return
		page.value++
		GetCircleList({
			page: page.value,
			limit: limit.value,
			categoryID: category.value
		}).then((res) => {
			console.log(res.data);
			if (!res.data) {
				noMore.value = true
				return
			}
			if (list.value && list.value.length > 0) {
				list.value = list.value.concat(res.data)
			} else {
				list.value = res.data
			}
			if (list.value.length >= res.total) {
				noMore.value = true
			}
			// console.log(res.data)
		})
	}

	onLoad(async () => {
		page.value = 0
		list.value = []
		category.value = 0
		categorySelect.value = []
		await refresh()
	})

	onReachBottom(async () => {
		await getMoreList()
	})

	onPullDownRefresh(async () => {
		list.value = []
		categorySelect.value = []
		// category.value = undefined
		page.value = 0
		noMore.value = false
		await refresh()
		await uni.stopPullDownRefresh()
	})

	function handleClick(e) {
		// console.log(e);
		if (e.index === 0) {
			uni.navigateTo({
				url: '/pages/circle/publish/publish'
			})
		} else if (e.index === 1) {
			uni.navigateTo({
				url: '/pages/circle/my/my'
			})
		} else if (e.index === 2) {
			uni.navigateTo({
				url: '/pages/circle/thumb/thumb'
			})
		}
		fab.value.close()
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: 90rpx;

		.cover {
			width: 100%;
			height: 200rpx;
		}

		.content {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;
			gap: 20rpx;
		}

		.no-more {
			text-align: center;
			font-size: 24rpx;
			margin: 20rpx 0;
			color: #666;
		}
	}
</style>
